<template>
    <van-row>
        <van-col span="6">
            <van-sidebar v-model="active" v-for="(v, i) in list" :key="i">
                <van-sidebar-item :title="v.cat_name"></van-sidebar-item>
            </van-sidebar>
        </van-col>
        <van-col span="17">
            <van-grid :border="false" :column-num="3" v-for="(v,i) in list[active]":key="i">
                <van-grid-item v-for="(val,index) in list[active]">
                    <van-image :src="val.cat_icon?val.cat_icon:'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" @click="sous"/>
                </van-grid-item>
            </van-grid>
        </van-col>
    </van-row>
</template>

<script setup>
import { ref } from 'vue';
import { categoriesApi } from '@/api/api';
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const active = ref(0);

let list = ref('')
const onSubmit = () => {
    categoriesApi().then((res) => {
        list.value = res.data.message
    })
};
onSubmit()

const sous=()=>{
    router.push('/search')
}

</script>

<style lang="scss" scoped></style>